import React from 'react';
import Taro from '@tarojs/taro';
import {View, Image, Block, Text, Navigator} from '@tarojs/components'
import Float from "../float/float";
import {platform} from "../../utils/platform-settting.service";
import classnames from 'classnames';
import './goods-big-img-list.scss'

const GoodsBigImgList: React.FC<{ data: []; isUser: true; isRecommendation?: false}> = (props) => {
  const dataColor = Taro.getStorageSync('colorData');

  const renderRefundSignOfRight = (item) => {
    const refund_signArr = item.refund_sign ? item.refund_sign.split(",") : "";

    if(refund_signArr.length > 0) {
      return refund_signArr.map(sign => (
        !!sign &&
        <Text
          className='goods-big-img-list-label'
          style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
        >{sign}</Text>
      ))
    }

    return <Block />;
  }

  return (
    <View className={`goods-big-img-list-content ${props.isRecommendation && 'goods-big-img-list-content-is-recommendation'}`}>
      {props.data.length > 0 && props.data.map((item: any) => <View className='goods-big-img-list-good-box' key={item.id}>
        <Navigator className='goods-big-img-list-wrap' url={item.url}>
          <View className='goods-big-img-list-swiper-box'>
            <Image src={item.main_img || item.img} mode='aspectFill' className='goods-big-img-list-img' />
          </View>
          <View className='goods-big-img-list-info'>
            <View className='goods-big-img-list-name'>{item.name}</View>
            {!!item.sub_title && <View className='goods-big-img-list-subTitle'>{item.sub_title}</View>}
            {((item.serviceLabels && item.serviceLabels.length > 0) || item.refund_sign) && <View className='goods-big-img-list-labels'>
              {item.serviceLabels && item.serviceLabels.length > 0 && item.serviceLabels.map((items, index) =>
                <Text
                  key={index} className='goods-big-img-list-label'
                  style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
                >{items.name}</Text>)}
              {
                process.env.P_ENV === 'kd' && item.refund_sign &&
                renderRefundSignOfRight(item)
              }
            </View>}
            {!!platform.info.is_show_sales_volume && !!item.sales_volume && <View className='salesVolume'>销量：{item.sales_volume}笔</View>}
            {!((process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') && item.is_free_visit && item.is_free_visit == 1) ?
              <View className='goods-big-img-list-info-box'>
                <View className='goods-big-img-list-left'>
                  <View className='goods-big-img-list-price'>
                    <View className='font-family-price'>
                      <Text className={`${(!!item.is_activity || !!item.discount) && 'goods-big-img-list-mark-min-big'} goods-big-img-list-mark`} style={`color: ${dataColor.priceColor}`}>¥</Text>
                      <View className={`goods-big-img-list-main view-inline ${(!!item.is_activity || !!item.discount) && 'goods-big-img-list-main-min-big'} goods-big-img-list-mark`} style={`color: ${dataColor.priceColor}`}><Float value={item.price}/></View>
                    </View>
                    {!!item.is_activity ? <Block>
                      <Text className='goods-big-img-list-discount' style={`background-color: ${dataColor.priceColor};`}>拼团价</Text>
                    </Block> : <Block>
                      {!!item.discount &&
                      <Text className='goods-big-img-list-discount' style={`background-color: ${dataColor.priceColor};`}><Text
                        className='font-family-price'
                      >{item.discount}</Text>折</Text>}
                    </Block>}
                    <Text className={`goods-big-img-list-market-price goods-big-img-list-margin-left ${!props.isRecommendation && 'goods-big-img-list-market-price-min-big'}`}
                          style={`color: ${dataColor.originalPriceColor}`}
                    >{props.isRecommendation ? '市场价 ' : ''}¥</Text>
                    <Text className={`goods-big-img-list-market-price ${!props.isRecommendation && 'goods-big-img-list-market-price-min-big'}`}
                          style={`color: ${dataColor.originalPriceColor}`}
                    >{item.market_price || 0}</Text>
                  </View>
                </View>
                <View className='goods-big-img-list-right'>
                  {/* 用户 */}
                  {(!process.env.DISTINGUISH_IDENTITY || props.isUser || !item.commission) &&
                  <View className='goods-big-img-list-snapped-up'>{item.is_activity == 1 ? '立即拼团' : '立即抢购'}</View>}
                  {/* 达人 */}
                  {!props.isUser && !!item.commission && process.env.DISTINGUISH_IDENTITY && <View className='goods-big-img-list-share-earn'>
                    <View className='goods-big-img-list-share-left'>分享赚</View>
                    <View className='goods-big-img-list-price'>
                      <Text>￥</Text>
                      <View style='display: inline-block' className={classnames('goods-big-img-list-true-price-share font-family-price', {
                        ['goods-big-img-list-true-price-share-small']: !!item.commission && item.commission.toString().length > 4
                      })}>
                        <Float value={item.commission} />
                      </View>
                    </View>
                  </View>}
                </View>
              </View>
             : <View className='goods-big-img-list-info-box'>
                <View className='goods-big-img-list-left'></View>
                <View className='goods-big-img-list-right'>
                  <View className='goods-big-img-list-snapped-up'>免费入园</View>
                </View>
              </View>}
          </View>
        </Navigator>
      </View>)}
    </View>
  )
}

GoodsBigImgList.defaultProps = {
  data: [],
  isUser: true,
  isRecommendation: false
}

export default GoodsBigImgList
